<template>
  <!--联系方式-->
  <div>
    <carousel :autoplaySpeed="autoplaySpeed" :Img="Img"></carousel>
    <v_menu :title="data.title" :site="data.list[activeIndex].list"></v_menu>

    <Row :gutter="16" class="wrapper">
      <i-col span="19" class="content">
        <div class="location">
          <Row :gutter="16">
            <i-col span="15">
              <img :src="contactWay.uri" alt="">
            </i-col>
            <i-col span="9">
              <ul class="arter">
                <li><span>联系人<i></i></span>：{{contactWay.linkman}}</li>
                <li><span>联系电话<i></i></span>：{{contactWay.phone}}</li>
                <li><span>邮箱<i></i></span>：{{contactWay.mail}}</li>
                <li><span>联系地址<i></i></span>：{{contactWay.addr}}</li>
              </ul>
            </i-col>
          </Row>
        </div>
      </i-col>
      <i-col span="5" class="navigation">
        <ngn :data="data" :activeIndex="activeIndex"></ngn>
      </i-col>
    </Row>
  </div>
</template>

<script>
  import carousel from '../module/carousel'
  import ngn from '../module/ngn'
  import v_menu from '../module/menu'

  export default {
    components: {carousel, ngn, v_menu},
    data() {
      return {
        contactWayLink: this.$api.url + '/contactmethod/selectContactMethod',
        activeIndex: 3,
        autoplaySpeed: 100000,
        Img: [
          {
            id: 1,
            imageLocation: require('../../assets/img/u69.jpg'),
            state: true,
            uri: "",
          },
        ],
        data: {
          title: '关于机构',
          list: [
            {list: '机构介绍', link: 'organizationIntroduce'},
            {list: '专家顾问', link: '/consultants'},
            {list: '组织结构', link: '/organizationStructure'},
            {list: '联系方式', link: '/contactWay'},
            {list: '期刊加盟', link: '/journalsJoin'},
          ]
        },
        contactWay: '',
      }
    },
    mounted() {
      this.dataArray()
    },
    methods: {
      dataArray() {
        this.$axios.get(this.contactWayLink).then((res) => {
          this.contactWay = res.data[0]
        });
      }
    }
  }
</script>

<style scoped>
  /*主要内容*/
  .wrapper .content {
    border-right: 1px solid #ccc;
    min-height: 300px;
  }

  .wrapper .navigation {
    padding-left: 0 !important;
  }

  .wrapper .content .location {
    padding: 20px 0 50px;
  }

  .wrapper .content .location img {
    width: 100%;
  }


  .arter li {
    font-size: 14px;
    line-height: 24px;
    color: #4a4a4a;
    list-style: none;
  }

  .arter li span {
    height: 24px;
    line-height: 24px;
    width: 68px;
    text-align: justify;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    font-weight: bold;
  }

  .arter li span i {
    display: inline-block;
    width: 100%;
    height: 0;
  }
</style>
